<template>
  <div ref="main"></div>
  <a-modal
    destroyOnClose
    :getContainer="() => $refs.main"
    :visible="visible"
    :footer="null"
    @update:visible="update"
    @ok="ok"
    style="min-width: 600px"
  >
    <a-row>
      <a-col span="14">
        <a-image
          :width="'100%'"
          :height="500"
          :src="form.url"
          :fallback="require('@/assets/null.png')"
          style="object-fit: contain"
        />
      </a-col>
      <a-col span="10">
        <ul class="description">
          <li>
            <span>图片源</span>
            <span>{{ form.url }}</span>
          </li>
          <li>
            <span>图片样式</span>
            <span v-if="form.image_type == '1'">横幅</span>
            <span v-if="form.image_type == '2'">竖版</span>
            <span v-if="form.image_type == '3'">方型</span>
          </li>
          <li>
            <span>所属分类</span>
            <span>{{ form?.dict?.title }}</span>
          </li>
          <li>
            <span>操作人</span>
            <span>{{ form?.user?.username }}</span>
          </li>
          <li>
            <span>操作时间</span>
            <span>{{ form?.user?.created_at }}</span>
          </li>
        </ul>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, defineProps, toRefs, defineEmits, watch, onMounted } from "vue";
const emits = defineEmits(["update:visible", "reload"]);
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  tempData: {
    default: {},
  },
  dictList: {
    default: [],
  },
});
const { visible, tempData, dictList } = toRefs(props);
const form = ref({});

watch(visible, (e) => {
  if (!e) return;
  form.value = tempData.value;
});

function update(e) {
  emits("update:visible", e);
}
async function ok() {
  emits("update:visible", false);
  emits("reload");
}
</script>

<style lang="less" scoped>
/deep/ .ant-modal {
  .ant-modal-body {
    padding: 0 !important;
  }
}

.description {
  font-size: 12px;
  margin: 0 20px 0 10px;
  margin-top: 50px;

  > li {
    margin-top: 20px;

    span:first-child {
      display: inline-block;
      min-width: 60px;
    }
  }
}
</style>
